<template>
	<div>
		<p>以下为子组件展示内容</p>
		<pre>
			getCurrentInstance获取当前组件上下文，ctx开发有效 proxy开发生产有效
		</pre>
		userInfo.name的值：{{userInfo.name}} <br>
		userName计算属性的值：{{userNameComputed}} <br>
		userInfo.name计算属性的值：{{userInfoComputed}} <br>
		<button type="button" @click="changeParentName">点击修改父组件state.name</button>
	</div>
</template>

<script>
	import {ref, reactive, computed, onMounted, getCurrentInstance} from 'vue'
	export default {
		props: ['userInfo', 'userName'],
		setup(props, context){
			const {userInfo, userName} = props
			// console.log('-----props, context---------', props, context)
			
			// 注意：此处用解构后的userName响应式会丢失，因此不会触发重新计算并更新视图,需要使用props.userName
			// const userNameComputed = computed(() => userName + '计算属性')
			const userNameComputed = computed(() => props.userName + '计算属性')
			const userInfoComputed = computed(() => userInfo.name + '计算属性')
			console.log(typeof(userInfoComputed), userInfoComputed )

			// 获取当前组件上下文，ctx开发有效 proxy开发生产有效
			const {ctx, proxy} = getCurrentInstance()
			// console.log('ctx, proxy', ctx, proxy)

			// mounted生命周期钩子函数
			onMounted(()=>{
				console.log('onMounted钩子函数执行')
			})

			const changeParentName = () => {
				context.emit('handleChange', '张骞枫666')
			}
			return {changeParentName, userNameComputed, userInfoComputed}
		},
	}
</script>

<style>
</style>
